<template>
  <h1>我审批的流程</h1>
  <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
    <el-table-column
        prop="id"
        label="ID"
        width="180">
    </el-table-column>
    <el-table-column
        prop="sendName"
        label="发起人"
        width="180">
    </el-table-column>
    <el-table-column
        prop="applyName"
        label="审批人"
        width="180">
    </el-table-column>
    <el-table-column
        prop="status"
        label="流程状态"
        width="180">
    </el-table-column>
    <el-table-column
        prop="text"
        label="详情"
        width="180">
    </el-table-column>
    <el-table-column
        prop="taskId"
        label="任务ID"
        width="200">
    </el-table-column>
    <el-table-column
        prop="processId"
        label="流程ID"
        width="200">
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
            type="success"
            @click="getImage(scope.$index, scope.row)"
        >查看流程图</el-button>
        <el-button
          type="primary"
          @click="postFlow(scope.$index, scope.row)">审批</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-drawer
      v-model="drawer"
      title="填写审批内容"
      :direction="direction"
      :before-close="handleClose"
  >
    <el-form :model="form">
      <el-form-item label="TaskId">
        <el-input v-model="form.taskId" disabled></el-input>
      </el-form-item>
      <el-form-item label="审批意见">
        <el-radio-group v-model="form.result">
          <el-radio label="通过" />
          <el-radio label="驳回" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.text"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交审批</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import {mapState} from "vuex";
import axios from 'axios'

export default {
  name: "approval",
  computed: mapState([
    "auth"
  ]),
  created() {
    let userName = this.auth.username;
    console.log(userName);
    this.getUserApplyFlow(userName);
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (row.status === '审批中') {
        return 'warning-row';
      } else if (row.status === '通过') {
        return 'success-row';
      }
      return '';
    },
    //获取流程列表
    getUserApplyFlow(userName) {
      const that = this;
      axios.post('http://localhost:8410/flowable/findByApplyUser?userName='+userName).then(function (response){
        console.log(response.data)
        that.tableData = response.data;
      })
    },
    // 跳转流程图
    getImage(index,row){
      let processId = row.processId;
      console.log(processId);
      window.open('http://localhost:8888/leave/createProcessDiagramPic?processId='+processId)
    },
    //审批流程
    postFlow(index,row){
      this.form.taskId = row.taskId;
      this.drawer = true;
    },
    onSubmit(){
      axios.post('http://localhost:8410/flowable/approveOA',{
        taskId: this.form.taskId,
        result: this.form.result,
        text: this.form.text,
        applyName: this.auth.username
      }).then(res=>{
        alert(res.data.message)
        this.drawer = false;
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  },
  data() {
    return {
      tableData: [],
      drawer: false,
      direction: 'rtl',
      form:{
        result:'',
        text:'',
        taskId:''
      }
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
